<template>
    <div>
        <div class="content">
        
                <div class="oitem" v-for="item in v" :key="item">
                    <a :href="item.vurl" target="_blank" rel="noopener noreferrer">
                        <h3>{{item.vn}}</h3>
                        <img :src="item.vpic" alt="" srcset="">
                    </a>
                </div>

        </div>
    </div>
</template>
<script>
export default {
        data() {
            return {
                v:[]
            }
        },
        created(){
        this.axios.get('/api/jp/avlist/202861101/1/?callback=jsonp9').then((response) => {
            
        // 已知字符串
                var str = response.data;
                //需要body和《hu之间的字符串。定义正则表达式。
                var reg = /(?<="vlist":).+(?=,"bossType")/;
                //上述正则表达式利用了：获取指定字符串之后：  (?<=指定字符串)     获取指定字符串之前： (?=指定字符串)，实现
                var matchResult = str.match(reg);
                if (matchResult.length > 0) {
                        this.v = JSON.parse(matchResult[0]);
                        console.log(JSON.parse(matchResult[0]));  
                    }
                })
    }

}
</script>
<style scoped>
 .content{
        width: 1200px;
        /* height: 500px; */
        background-color: yellow;
        margin: 0 auto;
        overflow: hidden;
    }
    .oitem{
        width: 250px;
        height: 300px;
        text-align: center;
        border: 2px solid rebeccapurple;
        border-radius: 5px;
        margin: 5px;
        float: left;
    }
</style>